<template>
  <view class="container">
    <view class="recommendList">
      <view
          class="recommend-item"
          @click="toDetail(item)"
          v-for="(item, index) in concertList"
          :key="index"
      >
        <view class="common-box">
          <view class="poster-box">
            <view class="image">
              <image :src="item.performanceCoverUrl" class="imagerUrl"></image>
            </view>
          </view>
          <view class="info-box">
            <view class="bold-text">
              {{ item.performanceTitle }}
            </view>
            <view class="topic">
              {{ item.performerNames }}
            </view>
            <view class="date">
              {{ formatDateTime2WeekDate(item.showTime) }}
            </view>
            <view class="address">
              {{ item.venueCity + "|" + item.venueName }}

              <!-- {{  }} -->
            </view>
            <view class="discount" v-if="item.maxDiscount !== 100">
              {{ discountPercentage(item.maxDiscount) + "起" }}
            </view>
            <view class="state-tag">
              <uni-tag
                  :inverted="true"
                  :circle="true"
                  size="normal"
                  :text="valueOf(item.performanceStatus).chineseName"
                  :type="valueOf(item.performanceStatus).showType"
              />
            </view>
            <view class="price">
              ￥{{ item.minPrice }}
              <view class="start"> 起</view>
            </view>
          </view>
        </view>

        <view class="Ticketing-box" v-if="isToday">
          <view class="left">
            <view class="text">
              正在热抢中
            </view>
          </view>
          <view class="right">
            <view class="goBtn">去抢票</view>
          </view>
        </view>
        <view class="Ticketing-box" v-if="willStartSale">
          <view class="left">
            <view class="timeText">
              {{ getSaleStartTime(new Date(item.saleTicketStartTime)) }}
              <uni-countdown @timeup="refresh" style="display: inline-block;margin-left: 20rpx" :show-day="false"
                             :font-size="14"
                             color="white"
                             backgroundColor="black"
                             :isConvertDaysToHours="true"
                             :hour="item.remainHour"
                             :minute="item.remainMinutes"
                             :second="item.remainSeconds"/>
            </view>
          </view>
          <view class="right">
            <view class="goBtn">去看看</view>
          </view>
        </view>
      </view>
    </view>
    <view class="tips" v-if="!isToday && !willStartSale">
      <span v-if="loading">加载中...</span>
      <span v-if="!hasMore">没有更多了...</span>
    </view>
  </view>
</template>

<script>
import {calculateTimeRemaining, formatDateTime2WeekDate, getSaleStartTime} from "../../../../utils/DateUtils";
import {valueOf} from "../../../../utils/PerformanceStatusUtil";
import {discountPercentage} from "../../../../utils/price";

export default {
  name: "concertList",
  props: {
    concertList: Array,
    loading: Boolean,
    hasMore: Boolean,
    isToday: Boolean,
    willStartSale: Boolean,
  },
  data() {
    return {};
  },
  methods: {
    calculateTimeRemaining,
    discountPercentage,
    getSaleStartTime,
    valueOf,
    toDetail(item) {
      uni.navigateTo({
        url: `/subpkg/concert-detail/concert-detail?performanceId=${item.performanceId}`,
        fail(error) {
          console.log(error);
        },
      });
    },
    formatDateTime2WeekDate,
    refresh() {
      this.$emit("refresh");
    },
  },
  watch: {
    concertList: {
      handler(newVal, oldVal) {
        if (this.willStartSale) {
          newVal.forEach(val => {
            var time = calculateTimeRemaining(new Date(val.saleTicketStartTime));
            val.remainHour = time[0];
            val.remainMinutes = time[1];
            val.remainSeconds = time[2];
          })
        }
      },
      deep: true // 如果 concertList 是一个对象或数组，需要设置 deep 为 true
    }
  }
};
</script>

<style lang="scss">
.tips {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.recommendList {
  margin-top: 10px;
  background-color: #f4f5f6;

  .recommend-item {
    position: relative;

    background-color: white;
    margin-top: 10px;
    height: auto;
    border-top: none;
    box-shadow: 2px 2px 2px #f0e5e6;
    border-radius: 10px;
    padding: 10px 10px;
  }

  .common-box {
    display: flex;
  }

  .poster-box {
    width: 35%;
    height: 330rpx;

    .image {
      width: 100%;
      height: 330rpx;
      border-radius: 5px;
      overflow: hidden;

      .imagerUrl {
        width: 100%;
        height: 100%;
      }
    }
  }

  .info-box {
    position: relative;
    top: -3px;
    left: 10px;
    width: 62%;
    // height: 350rpx;
    .bold-text {
      font-weight: 700;
      height: 40px;
      font-family: "fangsong";
      font-size: 18px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      word-wrap: break-word;
    }

    .topic {
      margin-top: 10px;
      height: 20px;
      color: #ff7627;
      font-size: 15px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      display: inline-block;
    }

    .date {
      height: 20px;
      margin-top: 5px;
      color: #504f4c;
      font-size: 14px;
    }

    .address {
      width: 95%;
      height: 20px;
      justify-content: start;
      letter-spacing: 2rpx;
      margin-top: 5px;
      color: #504f4c;
      font-size: 14px;
      white-space: nowrap; /* 不换行 */
      overflow: hidden; /* 隐藏溢出部分 */
      text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
    }

    .discount {
      padding: 1px 3px;
      border-radius: 5px;
      display: inline-block;
      font-size: 12px;
      margin-top: 5px;
      color: white;
      height: 18px;
      background-color: #ee4269;
    }

    .state-tag {
      margin-top: 10px;
      height: 25px;
    }

    .price {
      display: flex;
      justify-content: start;
      position: absolute;
      bottom: -10px;
      right: 10px;
      height: 35px;
      font-size: 26px;
      color: #d4237a;

      .start {
        margin-top: 7px;
        margin-left: 3px;
        font-size: 18px;
        color: #4b4a47;
      }
    }
  }

  .Ticketing-box {
    display: flex;
    margin-top: 20px;
    border-top: 2px dashed #efefef;
    width: 100%;
    height: 70rpx;
    justify-content: space-between; /* 将两个子元素放在容器的两端 */
    align-items: center; /* 垂直居中 */
    padding-top: 20rpx;

    .left {
      height: 80%;

      .text {
        text-align: center;
        font-size: 18px;
        font-family: 500;
      }

      .timeText {
        text-align: center;
        font-size: 16px;
        font-family: 500;
      }
    }

    .right {
      height: 100%;

      .goBtn {
        padding: 0 5rpx;
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        margin-bottom: 10px;
        height: 80%;
        width: 120rpx;
        background: linear-gradient(to right, #FF7E81, #FF2E79);
        border-radius: 24px;
        text-align: center; /* 可选，用于处理单行文本水平居中 */
        color: white;
      }
    }
  }


}


</style>
